import 'package:flutter/material.dart';
import 'package:ume_log_plugin/core/log_cus_btn.dart';

import 'log_ctrl_able.dart';
import 'utils.dart';

class LogWidget extends StatefulWidget {
  final LogCtrlable logCtrl;
  final LogCusBtnActions btnActions;

  const LogWidget({Key? key, required this.logCtrl, required this.btnActions}) : super(key: key);

  @override
  State<StatefulWidget> createState() => LogState();
}

class LogState extends State<LogWidget> {
  late LogCtrlable logCtrl;
  late LogCusBtnActions btnActions;
  final ScrollController scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    logCtrl = widget.logCtrl;
    btnActions = widget.btnActions;
    logCtrl.setLogChangeListener(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        if (mounted) {
          setState(() {});
          Future.delayed(const Duration(milliseconds: 300)).then((value) {
            if (mounted) {
              scrollController.animateTo(
                scrollController.position.maxScrollExtent,
                duration: const Duration(milliseconds: 300),
                curve: Curves.ease,
              );
            }
          });
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          color: Color(0xFF242424),
          borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
        ),
        constraints: const BoxConstraints(
          maxHeight: 500,
        ),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 30,
              decoration: const BoxDecoration(
                color: Color(0xFFc1c1c1),
                borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
              ),
              alignment: Alignment.center,
              child: Row(
                children: [
                  const SizedBox(width: 5),
                  SizedBox(
                    height: 24,
                    child: ElevatedButton(
                      onPressed: () => btnActions.toDevPage(),
                      child: const Text(
                        "devSetting",
                        style: TextStyle(
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 5),
                  SizedBox(
                    height: 24,
                    child: ElevatedButton(
                      onPressed: () => btnActions.toTestPage(),
                      child: const Text(
                        "testPage",
                        style: TextStyle(
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 5),
                  SizedBox(
                    height: 24,
                    child: ElevatedButton(
                      onPressed: () => logCtrl.cleanLog(),
                      child: const Text(
                        "clearLog",
                        style: TextStyle(
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: CustomScrollView(
                controller: scrollController,
                slivers: [
                  SliverPadding(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
                    sliver: SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (content, index) {
                          return _buildLogItem(index);
                        },
                        childCount: logCtrl.logList.length,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildLogItem(int index) {
    if (index >= logCtrl.logList.length) {
      return const SizedBox();
    }
    LogClass logClass = logCtrl.logList[index];
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: Text(
        "${timeFormat(logClass.timestamp, 'HH mm ss:[ms]')} ==> ${logClass.log}",
        style: TextStyle(
          color: logClass.logColor,
        ),
      ),
    );
  }
}
